<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Improve state logs to improve the information gathered from users with
trouble, specially on the login
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Download state logs

  Scenario: user download state logs
    Given [describe expected initial app state]

    When user long presses fox at login screen for 10 seconds
    Then state logs should be downloaded and include if vault exists
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enhances exported state logs with sanitized Keyring/Seedless details,
logged-in status, and environment/build metadata, with expanded test
coverage and updated snapshots.
> 
> - **State log generation (`app/util/logs/index.ts`)**:
> - Add `loggedIn` flag to output; default `true` and pass-through
parameter.
> - Include `KeyringController` summary with `keyrings`, `isUnlocked`,
and computed `vaultExists` (no vault contents).
> - Replace `SeedlessOnboardingController` with sanitized state:
includes `userId`, `authConnection`, `authConnectionId`, `authPubKey`,
booleans for sensitive fields, and filtered
`socialBackupsMetadata`/`nodeAuthTokens` (no secrets); handles
`null`/`undefined`.
> - `downloadStateLogs`: append `environment`,
`remoteFeatureFlagEnvironment`, `remoteFeatureFlagDistribution`,
`otaVersion`, `runtimeVersion`, and conditionally `metaMetricsId` (only
if opted in); platform-specific sharing preserved.
> - **Tests (`app/util/logs/index.test.ts`)**:
> - New/updated tests for `vaultExists` cases, `loggedIn` flag behavior,
Seedless sanitization (including auth fields and filtering),
null/undefined handling, env/OTA metadata inclusion, and MetaMetrics
opt-out.
> - Snapshot updates reflecting structured keyrings, `vaultExists`,
sanitized Seedless state, and `loggedIn` field.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
305fbf3. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

)

## **Description**

This PR implements the feature to display trade details when tapping on
a recent trade in the Perps home screen and asset detail screen.


## **Changelog**

CHANGELOG entry: Added ability to view trade details when tapping on
recent trades in Perps, with a "Trade again" button to quickly navigate
back to trading


## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2193

## **Manual testing steps**

```gherkin
Feature: Perps trade details navigation

  Scenario: user taps on a recent trade to view details
    Given user is on the Perps home screen
    And user has recent trades displayed

    When user taps on a recent trade
    Then user sees the trade details screen with date, size, entry/close price, fees, and P&L

  Scenario: user taps Trade again to navigate to market
    Given user is on the trade details screen

    When user taps the "Trade again" button
    Then user is navigated to the perp market detail page for that asset

```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
Does not show trade again button

### **After**
Shows trade again button
<!-- [screenshots/recordings] -->
<img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17
Pro - 2025-12-16 at 12 33 40"
src="https://github.com/user-attachments/assets/82720ad0-77d0-4354-a83b-6eac861915ca"
/>


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a Trade again button on trade details that deep-links to the
market, and changes recent activity item presses to open position
transaction details; updates tests and i18n.
> 
> - **Perps trade details (`PerpsPositionTransactionView`)**:
> - Add `Trade again` button to navigate to `Routes.PERPS.ROOT` →
`Routes.PERPS.MARKET_DETAILS` with minimal `market` (from
`transaction.asset`) and `source: 'trade_details'`.
>   - Build `market` via `useMemo`; hide CTA when `asset` is undefined.
>   - Keep block explorer navigation; minor refactor/imports.
> - **Recent activity navigation (`PerpsRecentActivityList`)**:
> - Change transaction item press to navigate to
`Routes.PERPS.POSITION_TRANSACTION` with the full `transaction` instead
of market details.
> - **Tests**:
> - Add/adjust tests for new navigation flows and conditional rendering
of `Trade again`.
> - **Localization**:
>   - Add `perps.transactions.trade_again` string.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d42aef3. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## **Description**

Removes the HIP-3 DEX prefix (e.g., "xyz:") from market symbols
displayed in the Order Book view header.

**Changes:**
- Uses the existing `getPerpsDisplaySymbol` utility to strip DEX
prefixes from HIP-3 market symbols
- "xyz:GOOGL" now displays as "GOOGL" in the unit toggle button
- Consistent with symbol display in other Perps views (PerpsCard,
PerpsTokenLogo, etc.)

**JIRA:**
[TAT-2192](https://consensyssoftware.atlassian.net/browse/TAT-2192)

## **Changelog**

CHANGELOG entry: Fixed HIP-3 market symbols displaying with DEX prefix
in Order Book view

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2192

## **Manual testing steps**

```gherkin
Feature: Order Book Symbol Display

  Scenario: HIP-3 market symbols display without DEX prefix
    Given the user navigates to Order Book for a HIP-3 market (e.g., xyz:GOOGL)
    When the Order Book view loads
    Then the unit toggle button displays "GOOGL" (not "xyz:GOOGL")
    And the symbol is correctly shown without the DEX prefix

  Scenario: Regular crypto symbols display unchanged
    Given the user navigates to Order Book for a crypto market (e.g., BTC)
    When the Order Book view loads
    Then the unit toggle button displays "BTC"
    And no prefix stripping occurs for non-HIP-3 markets
```

## **Screenshots/Recordings**

### **Before**

<!-- Symbol displays as "xyz:GOOGL" in the header -->

### **After**
<img width="1206" height="2622" alt="Simulator Screenshot -
iPhone16Pro-Gamma - 2025-12-16 at 20 06 03"
src="https://github.com/user-attachments/assets/53c9491d-8dae-4ca7-b962-d9b2e55ccd22"
/>


<!-- Symbol displays as "GOOGL" in the header -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


[TAT-2192]:
https://consensyssoftware.atlassian.net/browse/TAT-2192?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Use getPerpsDisplaySymbol to display HIP-3 market symbols without DEX
prefixes in the Order Book unit toggle.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
90b3b2e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

- Improves Tron error handling by showing user friendly error messages
instead of raw error codes.
- Updates TRX staking input so Max skips the EVM modal.
- Triggers Tron balances update after the staking operation.
- Tron snap update to the latest version


## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refines Tron staking/unstaking UX (Max/preview), localizes errors,
refreshes balances after actions, uses live Tron balances in Asset
Overview, and bumps tron-wallet-snap.
> 
> - **Tron staking/unstaking UX**:
> - `EarnInputView`/`EarnWithdrawInputView`: Right action for TRX shows
preview or sets `Max` without EVM modal; passes `tronAccountId` to
navigation result handler.
>   - Hooks `useTronStake`/`useTronUnstake`: expose `tronAccountId`.
> - `handleTronStakingNavigationResult`: refreshes balances via
`MultichainBalancesController.updateBalance(accountId)` on success.
> - **Error localization**:
> - Add `getLocalizedErrorMessage` mapping (e.g., `InsufficientBalance`
→ `stake.tron.errors.insufficient_balance`).
> - Update `locales/languages/en.json` with
`stake.tron.errors.insufficient_balance`.
> - **Asset Overview (TRON)**:
> - Prefer live asset data via `selectAsset` for TRON (`balance`,
`balanceFiat`) instead of navigation params.
> - **Dependencies**:
>   - Bump `@metamask/tron-wallet-snap` to `^1.16.1`.
> - **Tests**:
> - Add/update tests for TRX Max behavior (no MaxInputModal), account ID
exposure, balance refresh, and error localization.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3871f24. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
https://consensyssoftware.atlassian.net/browse/RWDS-900
UI fixes to season end view
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 19 49 46"
src="https://github.com/user-attachments/assets/905d638f-b8b6-4037-8b5c-02caa76b8a4c"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 19 49 38"
src="https://github.com/user-attachments/assets/5c0ebb0e-e6bb-4f1f-b1ca-4644f09d249f"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 19 20 48"
src="https://github.com/user-attachments/assets/c2a04518-df0c-4b5e-a83d-a7a2b77a0557"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 19 19 15"
src="https://github.com/user-attachments/assets/5459417b-cbf2-4a20-aafa-f7bb41e7f2bb"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 17 57 51"
src="https://github.com/user-attachments/assets/0e8b839c-f7bb-4df2-b0a1-a9076cf4aebb"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-16 at 15 21 34"
src="https://github.com/user-attachments/assets/0ae5808b-c3b0-45a9-a4db-8c6dd7614792"
/>

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refines previous-season summary UI with new icons/typography and adds
minimum-app-version gating/messaging for claiming, plus compact rewards
list, updated assets/translations, and tests.
> 
> - **Rewards • Previous Season UI**:
> - `PreviousSeasonLevel`: Replace tier image with `Icon Rocket`;
simplify layout; show level and name with updated text variants.
> - `PreviousSeasonBalance`: Tweak spacing, icon size, and use
`HeadingSm` for total.
> - `PreviousSeasonReferralDetails`: Show People icon + referral count
only; remove referral points row; style updates.
> - `PreviousSeasonSummary`: Medium-weight title; show season fetch
error via `RewardsErrorBanner` with new strings.
> - **Unlocked Rewards logic/UI**:
> - Add `hasMinimumRequiredVersion` check via
`selectSeasonShouldInstallNewVersion`; compute
`shouldInstallNewVersion`.
> - Render update/version-required message (link to store) with `Icon
Danger` or "check back soon" with `Icon Question`.
> - Compact rewards list via `RewardItem` `compact` prop; spacing
tweaks; skeleton refinements.
> - **Components/Assets**:
>   - `RewardItem`: New `compact` prop adjusts padding/border behavior.
> - `rewards-season-ended-no-unlocked-rewards.svg`: Use `currentColor`;
accepts `color`; size adjustments.
> - **i18n**:
> - Add `rewards.season_error.*`; adjust previous-season strings
(`update_metamask_version`, `to_claim_rewards`, `check_back_soon`).
> - **Tests**:
> - Update/extend tests for new icons, messages, loading/error behavior,
version gating, store links, and `hasMinimumRequiredVersion` invocation.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
432b626. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Rik Van Gulck <vangulckrik@gmail.com>

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Small UI update, to look like:

<img width="404" height="234" alt="Screenshot 2025-12-15 at 15 45 20"
src="https://github.com/user-attachments/assets/f8a47d7c-16e8-4ea9-855d-6ad6c8ec8e28"
/>


## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refreshes Tron staking CTA with new copy and styles, renames CTA
handler prop, updates default stake button label, and aligns tests and
i18n keys.
> 
> - **UI • Earn / Tron**:
>   - `TronStakingCta`:
>     - Uses `useStyles` with new `TronStakingCta.styles.ts` for layout.
> - Updates copy structure to `title`, `description_start` + APR +
`description_end` and link label `stake.stake_your_trx_cta.learn_more`.
>     - Renames prop `onLearnMore` → `onEarn` and wires to link button.
>   - `TronStakingButtons`:
> - Changes default stake label to
`strings('stake.stake_your_trx_cta.earn_button')` when no staked
positions; keeps `stake_more` when applicable.
> - **Tests**:
> - Update expectations for new labels/props and screen text in
`TronStakingCta.test.tsx` and `TronStakingButtons.test.tsx`.
> - **Localization**:
> - Replaces `stake.stake_your_trx_cta` keys with `title`,
`description_start`, `description_end`, `learn_more`, and adds
`earn_button` in `locales/languages/en.json`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
71a7957. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## **Description**

Adds a new `HeaderWithTitleLeftScrollable` component to the component
library (components-temp).

**What is the reason for the change?**
We need a collapsing header component that smoothly transitions between
an expanded state (showing rich content via TitleLeft) and a compact
sticky state (with HeaderBase) based on scroll position. This pattern is
commonly used in transaction flows like Send where the header displays
transaction details that collapse as the user scrolls.

**What is the improvement/solution?**
- New `HeaderWithTitleLeftScrollable` component using Reanimated for
performant scroll-linked animations
- Companion `useHeaderWithTitleLeftScrollable` hook for managing scroll
state
- Supports `onBack`, `backButtonProps`, `titleLeftProps`, custom
`titleLeft` node, and `endButtonIconProps`
- Dynamic height measurement with `onExpandedHeightChange` callback
- Configurable `scrollTriggerPosition` for controlling collapse timing
- Full TypeScript support with comprehensive types
- Unit tests and Storybook stories included

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/jira/software/c/projects/MDP/boards/2972?assignee=62afb43d33a882e2be47c36f&selectedIssue=MDP-643

## **Manual testing steps**

```gherkin
Feature: HeaderWithTitleLeftScrollable

  Scenario: Header collapses on scroll
    Given the user is on a screen with HeaderWithTitleLeftScrollable
    When user scrolls down the content
    Then the header smoothly collapses from expanded to compact state
    And the compact title fades in when large content is hidden

  Scenario: Header expands on scroll up  
    Given the header is in collapsed state
    When user scrolls up to the top
    Then the header smoothly expands back to show the TitleLeft content
```

## **Screenshots/Recordings**

### **Before**

N/A - New component

### **After**

https://github.com/user-attachments/assets/e45dff1d-8e36-4bab-877e-e44631e3c1ee

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces a scroll-collapsing header component
`HeaderWithTitleLeftScrollable` with a companion hook, plus tests and
Storybook stories.
> 
> - **Components**:
> - Add
`app/component-library/components-temp/HeaderWithTitleLeftScrollable/HeaderWithTitleLeftScrollable.tsx`
— collapsing header that transitions between expanded `TitleLeft` and
compact `HeaderBase` based on `scrollY`.
> - Export from
`components-temp/HeaderWithTitleLeftScrollable/index.ts`.
> - **Hook**:
> - Add `useHeaderWithTitleLeftScrollable` to manage `scrollY`,
`expandedHeight`, and optional `scrollTriggerPosition` with `onScroll`
handler.
> - **Types**:
> - Define `HeaderWithTitleLeftScrollable.types.ts` for component and
hook options/return types.
> - **Tests**:
> - Add unit tests in `HeaderWithTitleLeftScrollable.test.tsx`
(component rendering, back button behavior, custom title precedence,
hook defaults/overrides).
> - **Storybook**:
> - Add stories `HeaderWithTitleLeftScrollable.stories.tsx` showcasing
variants and dynamic height.
>   - Register story in `.storybook/storybook.requires.js`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
34cae90. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

…arket List screen (#24041)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Adding new performance test that measures the loading times for the
available balance on the Predict Market List screen. The test tracks the
time taken to navigate to the Predict tab, display the balance card, and
fully load the available balance text. Additionally, it enhances the
`PredictMarketListScreen` class by adding methods to check the
visibility of the balance card and available balance text, improving the
overall testing framework.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMQA-1193

## **Manual testing steps**

```gherkin
Feature: Predict Available Balance Performance
  As a user with an existing balance on Polygon
  I want the available balance to load quickly on the Predict Market List screen
  So that I can see my funds without waiting

  Background:
    Given I have an existing wallet with balance on Polygon
    And I am logged into the MetaMask Mobile app

  @performance @predict @balance
  Scenario: Measure time to navigate to Predict tab
    Given I am on the Wallet Main screen
    When I tap the action button in the tab bar
    And I tap the Predict button in the wallet action modal
    Then the Predict Market List container should be displayed
    And the navigation time should be recorded

  @performance @predict @balance
  Scenario: Measure time for balance card to appear
    Given I am on the Predict Market List screen
    When the container is displayed
    Then the Balance Card should become visible
    And the balance card load time should be recorded

  @performance @predict @balance
  Scenario: Measure time for available balance text to load
    Given I am on the Predict Market List screen
    And the Balance Card is visible
    When the balance data is fetched from the network
    Then the "Available balance" text should be displayed
    And the balance text load time should be recorded

  @performance @predict @balance @e2e
  Scenario: Complete available balance load time performance test
    Given I am logged into the app with an account that has Polygon balance
    When I tap the action button in the tab bar
    And I tap the Predict button
    Then the Predict Market List container should be displayed within acceptable time
    And the Balance Card should become visible
    And the "Available balance" text should appear indicating the balance is fully loaded
    And all performance metrics should be recorded:
      | Metric                          | Description                                              |
      | Navigate to Predict             | Time from tapping Predict button to container displayed  |
      | Balance Card Visible            | Time from container displayed to balance card visible    |
      | Available Balance Loaded        | Time from balance card visible to balance text displayed |
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a performance test for time-to-available-balance on Predict
Market List and extends the screen object with balance card/available
balance selectors and visibility checks.
> 
> - **Tests**:
> - Add
`appwright/tests/performance/login/predict/predict-available-balance.spec.js`
to measure time from tapping Predict to when `Available balance` is
shown, recording metrics via `performanceTracker`.
> - **Screen Objects**
(`wdio/screen-objects/PredictMarketListScreen.js`):
>   - Import `PredictBalanceSelectorsIDs` and add `balanceCard` getter.
> - Add `isBalanceCardDisplayed()`, `getAvailableBalanceText()`, and
`isAvailableBalanceDisplayed()` for both WDIO and Appwright flows.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
6605ff1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->